<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节目导视系统</title>
    <style>
        /* 基础样式 */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: var(--font-family, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
            background: linear-gradient(135deg, #1a1a2e, #0f3460);
            color: white;
            min-height: 100vh;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 850px;
            width: 90%;
            text-align: center;
            border: var(--container-border, 3px solid #030120);
            border-radius: 15px;
            padding: 25px;
            background: rgba(0, 0, 0, 0.3);
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
        }
        
        /* 标题区域 */
        header {
            margin-bottom: 30px;
            animation: fadeInDown 1.2s;
        }
        h1 {
            font-size: 3.2rem;
            font-weight: bold;
            letter-spacing: 2px;
            background: linear-gradient(45deg, #00dbde, #fc00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 15px rgba(255,255,255,0.3);
            margin-bottom: 10px;
        }
        .subtitle {
            font-size: 1.3rem;
            opacity: 0.8;
            animation: pulse 3s infinite alternate;
        }
        
        /* 节目列表 - 非正方框设计 */
        .schedule-list {
            min-height: 380px;
            position: relative;
            padding: 15px;
            margin: 20px 0;
        }
        .schedule-item {
            background: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(12px);
            border-radius: 12px 30px 12px 30px; /* 非正方框设计 */
            padding: 28px;
            margin: 20px 0;
            display: flex;
            justify-content: space-between;
            border: var(--item-border, 2px solid #00dbde);
            box-shadow: 0 5px 15px rgba(0,0,0,0.4);
            /* 卷帘动画 */
            opacity: 0;
            transform: translateY(-20px);
            max-height: 0;
            overflow: hidden;
            animation: rollDown 1.2s forwards;
            animation-delay: calc(0.3s * var(--delay-index));
        }
        .show-title {
            font-size: var(--title-font-size, 2.1rem);
            font-weight: bold;
            letter-spacing: 1.2px;
            text-align: left;
            flex: 1;
            text-shadow: 0 0 8px rgba(0,219,222,0.6);
        }
        .show-time {
            font-size: 1.9rem;
            background: linear-gradient(90deg, #00dbde, #fc00ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            padding: 0 20px;
            font-weight: bold;
            min-width: 120px;
        }
        
        /* 隐藏式控制面板（技术人员用） */
        .tech-panel {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.85);
            padding: 15px;
            border-top: 3px solid #555;
            transform: translateY(100%);
            transition: transform 0.5s ease;
            z-index: 1000;
        }
        .tech-panel.visible {
            transform: translateY(0);
        }
        .control-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
        }
        .control-btn {
            padding: 10px 25px;
            background: rgba(255,255,255,0.1);
            color: #00dbde;
            border: 1px solid #00dbde;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }
        .control-btn:hover {
            background: rgba(0,219,222,0.2);
            transform: translateY(-2px);
        }
        .copyright {
            color: #aaa;
            font-size: 0.9rem;
            margin-top: 10px;
        }
        .page-indicator {
            color: #fc00ff;
            font-size: 1.3rem;
            margin-left: 15px;
        }
        
        /* 动画定义 */
        @keyframes fadeInDown {
            0% { opacity: 0; transform: translateY(-30px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
            0% { transform: scale(0.98); opacity: 0.7; }
            100% { transform: scale(1.02); opacity: 1; }
        }
        @keyframes rollDown {
            0% { 
                opacity: 0;
                transform: translateY(-20px);
                max-height: 0;
                padding-top: 0;
                padding-bottom: 0;
            }
            100% { 
                opacity: 1;
                transform: translateY(0);
                max-height: 150px;
            }
        }
        
        /* 响应式适配 */
        @media (max-width: 768px) {
            .schedule-item { 
                flex-direction: column; 
                gap: 15px; 
                text-align: center;
            }
            .show-title, .show-time { 
                width: 100%; 
            }
            .control-row { 
                flex-direction: column; 
                gap: 10px; 
            }
            h1 { font-size: 2.4rem; }
            .page-indicator { margin: 10px 0; }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1 id="mainTitle">节目导视系统</h1>
            <div class="subtitle" id="subTitle">加载中...</div>
        </header>
        
        <div class="schedule-list" id="scheduleList">
            <!-- 动态生成节目列表 -->
        </div>
    </div>
    
    <!-- 隐藏式技术控制面板（含版权信息） -->
    <div class="tech-panel" id="techPanel">
        <div class="control-row">
            <div>
                <button class="control-btn" id="prevBtn">上一页</button>
                <button class="control-btn" id="nextBtn">下一页</button>
                <span class="page-indicator">
                    第 <span id="currentPage">1</span> 页 / 共 <span id="totalPages">1</span> 页
                </span>
            </div>
            <div class="copyright" id="copyright">
                © 2025 节目导视系统 v3.0 - 仅限技术人员使用
            </div>
        </div>
    </div>

    <script>
        // ===================== 系统配置 =====================
        const CONFIG_PATH = 'config.json';  // 配置文件路径
        
        // ===================== 状态管理 =====================
        let currentPage = 1;
        let itemsPerPage = 3;
        let configData = {};
        let autoSlideInterval = null;
        let techPanelTimeout = null;
        
        // ===================== DOM元素 =====================
        const scheduleList = document.getElementById('scheduleList');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const mainTitle = document.getElementById('mainTitle');
        const subTitle = document.getElementById('subTitle');
        const copyrightEl = document.getElementById('copyright');
        const techPanel = document.getElementById('techPanel');
        
        // ===================== 初始化系统 =====================
        window.addEventListener('DOMContentLoaded', async () => {
            await loadConfig();
            applyStyleConfig();
            renderContent();
            startAutoSlide();
            setupEventListeners();
            
            // 绑定技术面板激活快捷键（Ctrl+Shift+E）
            document.addEventListener('keydown', handleKeyShortcut);
        });
        
        // ===================== 核心功能 =====================
        async function loadConfig() {
            try {
                const response = await fetch(CONFIG_PATH);
                configData = await response.json();
                
                // 更新页面内容
                mainTitle.textContent = configData.title || "节目导视系统";
                subTitle.textContent = configData.subtitle || "精彩节目 · 动态更新";
                copyrightEl.textContent = configData.copyright || '© 2025 节目导视系统';
                
            } catch (error) {
                console.error('配置加载失败:', error);
                configData = {
                    title: "节目导视",
                    subtitle: "默认配置",
                    programs: [
                        { title: "默认节目1", time: "08:00" },
                        { title: "默认节目2", time: "10:30" },
                        { title: "默认节目3", time: "13:15" }
                    ],
                    pageDuration: 5, // 默认5秒
                    loopMode: "cycle"
                };
            }
        }
        
        function applyStyleConfig() {
            const fontConfig = configData.fontConfig || {};
            const borderConfig = configData.borderConfig || {};
            
            // 设置CSS变量
            document.documentElement.style.setProperty('--font-family', fontConfig.fontFamily);
            document.documentElement.style.setProperty('--font-weight', fontConfig.fontWeight);
            document.documentElement.style.setProperty('--letter-spacing', fontConfig.letterSpacing);
            document.documentElement.style.setProperty('--title-font-size', fontConfig.titleFontSize);
            document.documentElement.style.setProperty('--item-border', borderConfig.itemBorder);
            document.documentElement.style.setProperty('--container-border', borderConfig.containerBorder);
        }
        
        function renderContent() {
            scheduleList.innerHTML = '';
            
            // 计算当前页数据
            const startIndex = (currentPage - 1) * itemsPerPage;
            const endIndex = Math.min(startIndex + itemsPerPage, configData.programs.length);
            const currentPrograms = configData.programs.slice(startIndex, endIndex);
            
            // 更新分页信息
            document.getElementById('currentPage').textContent = currentPage;
            document.getElementById('totalPages').textContent = 
                Math.ceil(configData.programs.length / itemsPerPage);
            
            // 动态生成节目项
            currentPrograms.forEach((program, index) => {
                const item = document.createElement('div');
                item.className = 'schedule-item';
                item.style.setProperty('--delay-index', index); // 动画延迟变量
                
                item.innerHTML = `
                    <div class="show-title">${program.title}</div>
                    <div class="show-time">${program.time}</div>
                `;
                scheduleList.appendChild(item);
            });
        }
        
        function startAutoSlide() {
            clearInterval(autoSlideInterval);
            const duration = (configData.pageDuration || 5) * 1000;
            
            autoSlideInterval = setInterval(() => {
                const totalPages = Math.ceil(configData.programs.length / itemsPerPage);
                
                // 根据循环模式处理翻页
                if (currentPage < totalPages) {
                    currentPage++;
                } else if (configData.loopMode === "cycle") {
                    currentPage = 1;
                } else {
                    // 停在最后一页时停止自动轮播
                    clearInterval(autoSlideInterval);
                    return;
                }
                
                renderContent();
            }, duration);
        }
        
        // ===================== 事件处理 =====================
        function setupEventListeners() {
            prevBtn.addEventListener('click', goToPrevPage);
            nextBtn.addEventListener('click', goToNextPage);
        }
        
        function handleKeyShortcut(e) {
            // Ctrl+Shift+E 切换控制面板
            if (e.ctrlKey && e.shiftKey && e.key === 'E') {
                techPanel.classList.toggle('visible');
                
                // 10秒后自动隐藏面板
                clearTimeout(techPanelTimeout);
                techPanelTimeout = setTimeout(() => {
                    techPanel.classList.remove('visible');
                }, 10000);
            }
        }
        
        function goToPrevPage() {
            if (currentPage > 1) {
                currentPage--;
                renderContent();
                resetAutoSlide();
            }
        }
        
        function goToNextPage() {
            const totalPages = Math.ceil(configData.programs.length / itemsPerPage);
            if (currentPage < totalPages) {
                currentPage++;
                renderContent();
                resetAutoSlide();
            } else if (configData.loopMode === "cycle") {
                currentPage = 1;
                renderContent();
                resetAutoSlide();
            }
        }
        
        function resetAutoSlide() {
            clearInterval(autoSlideInterval);
            startAutoSlide();
        }
    </script>
</body>
</html>